<template>
  <div>
      <el-form ref="planForm" :model="plan" :rules="dataRule" label-width="80px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="plan.title"></el-input>
      </el-form-item>
      <el-form-item label="提示问题" prop="question">
        <el-row>
          <el-col :span="15"><el-input v-model="plan.question"></el-input></el-col>
          <el-col :span="5"><el-button @click="addQuestionClick()"> 添加</el-button></el-col>
        </el-row>
        <el-row>
          <ol>
            <!-- 提示问题列表 -->
            <template v-for="(item,index) in plan.questionList">
              <li :key="index">
                <!-- 问题内容 -->
                <el-tag closable
                  style="color: black;font-size: 14px;"
                  :disable-transitions="false"
                  @close="deleteQuestionClick(index)">
                  {{item.question}}
                </el-tag>
                <!-- 删除按钮 -->
                <!-- <el-button class="d2-ml-5" size="mini" icon="el-icon-delete" circle @click="deleteQuestionClick(index)"></el-button> -->
              </li>
            </template>
          </ol>
        </el-row>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="1.5">
        <div class="flex-col"  style="width: 80px;">
          <label class="el-form-item__label">内容详情</label>
        </div>
      </el-col>
      <el-col :span="22">
        <!-- 切换器 -->
        <el-switch
            v-model="editMarkdown"
            active-text="Markdown"
            inactive-text="富文本">
        </el-switch>
        <hr>
        <!-- 富文本 -->
        <div v-show="editMarkdown===false">
          <d2-quill
          style="min-height: 300px; margin-bottom: 20px;"
          v-model="plan.detail"
          @text-change="textChangeHandler"
          @selection-change="selectionChangeHandler"
          @editor-change="editorChangeHandler"/>
        </div>
        <!-- Markdown -->
        <div v-if="editMarkdown">
          <d2-mde
            ref="mde"
            v-model="plan.detailMd"/>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 5px">
      <el-col :span="2"  :offset="1">
        标签：
      </el-col>
      <el-col :span="15">
        <el-tag
          :key="tag"
          v-for="tag in plan.tag"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)">
          {{tag}}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="tagInputVisible"
          v-model="tagInputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>

      </el-col>
    </el-row>
    <el-row>
      <el-col :span="21"  :offset="2">
        <el-button type="primary" @click="submitPlan">{{submitText}}</el-button>
        <el-button @click="reset()">重置</el-button>
      </el-col>
    </el-row>
    <div v-show="editMarkdown===false">
      <el-divider></el-divider>
      <el-card shadow="never" class="d2-card d2-mt">
        <d2-highlight :code="plan.detail" format-html/>
      </el-card>
    </div>
  </div>
</template>

<script>
import { newPlan, updatePlan } from '@api/plan.api.fetch'
export default {
  props: {
    isUpdate: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      plan: {
        planId: '',
        title: '',
        detail: '<p><br></p>',
        detailMd: '',
        question: '',
        tag: [],
        questionList: []
      },
      editMarkdown: false, // false --quill，true --Markdown
      dataRule: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ]
      },
      submitText: '新增',
      tagInputVisible: false,
      tagInputValue: ''
    }
  },
  mounted () {
    this.submitText = this.isUpdate ? '修改' : '新增'
  },
  methods: {
    init (data) {
      this.plan = data || this.plan
      // questionList等内容有可能为null
      this.plan.questionList = this.plan.questionList || []
      this.plan.detailMd = this.plan.detailMd || ''
      console.log(this.plan.tag)
      this.plan.tag = this.plan.tag || []
      // 应对标题修改情况
      if (this.plan.tag.indexOf(this.plan.title) > -1) {
        this.plan.tag.splice(this.plan.tag.indexOf(this.plan.title), 1)
      }
    },
    reset () {
      this.plan.title = ''
      this.plan.detail = '<p><br></p>'
      this.plan.detailMd = ''
      this.plan.question = ''
      this.editMarkdown = false
    },
    submitPlan () {
      this.$refs['planForm'].validate((valid) => {
        if (valid) {
          this.plan.tag.push(this.plan.title)
          let p = JSON.parse(JSON.stringify(this.plan))
          // p.tag = JSON.stringify(this.plan.tag)
          let action = this.isUpdate ? updatePlan : newPlan
          action(p).then(res => {
            this.$emit('submitOk')
          })
        }
      })
    },
    // 问题相关方法 start
    // 点击添加问题按钮
    addQuestionClick () {
      const question = this.plan.question
      if (question.trim().length > 0) {
        this.plan.questionList.push({ question: question, suggest: '' })
        this.plan.question = ''
      } else {
        this.$message({
          message: '请输入问题',
          type: 'warning'
        })
      }
    },
    // 移除某一个问题
    deleteQuestionClick (index) {
      if (index >= 0) {
        this.plan.questionList.splice(index, 1)
      }
    },
    // 问题相关方法 end
    textChangeHandler (delta, oldDelta, source) {
      // console.group('QuillEditor textChangeHandler')
      // console.log(delta, oldDelta, source)
      // console.groupEnd()
    },
    selectionChangeHandler (range, oldRange, source) {
      // console.group('QuillEditor selectionChangeHandler')
      // console.log(range, oldRange, source)
      // console.groupEnd()
    },
    editorChangeHandler (eventName, ...args) {
      // console.group('QuillEditor editorChangeHandler')
      // console.log(eventName, args)
      // console.groupEnd()
    },
    // 标签相关方法开始
    handleClose (tag) {
      this.plan.tag.splice(this.plan.tag.indexOf(tag), 1)
    },
    showInput () {
      this.tagInputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm () {
      let inputValue = this.tagInputValue
      if (inputValue) {
        this.plan.tag.push(inputValue)
      }
      this.tagInputVisible = false
      this.tagInputValue = ''
    }
    // 标签相关方法end
  }
}
</script>

<style>
.flex-col{
  display: flex;
  justify-content: stretch;
  flex-direction: column;
  align-items: flex-start;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
